<script>
import { mapState, mapMutations } from 'vuex';
// #ifdef APP-PLUS
// const openinstall = uni.requireNativePlugin('openinstall-plugin') || null;
// #endif
export default {
	globalData:{
		videoCategory: uni.getStorageSync('videoCategory') || [],
	},
    methods:{
    },
	
	
    onLaunch: function() {
        const that = this;
        //监听网络
        //#ifndef H5
        uni.getNetworkType({
            success: function(res) {
                console.log('uni.getNetworkType');
                console.log(JSON.stringify(res, undefined, '/t'));
                let networkType = res.networkType;
                let data = {
                    networkType: networkType,
                    isConnected: networkType == 'none' ? false : true
                };
                if (networkType == 'none') {
                    that.$common.showTip('无法链接网络，请检查wifi或者移动数据网络是否正常！', 'none');
                }
                that.$store.dispatch('setNetwork', data);
            }
        });
        // const clientid = plus.push.getClientInfo().clientid;
        // console.log('推送cid:' + clientid);
        uni.onNetworkStatusChange(function(res) {
            const tips = res.isConnected ? `当前网络是${res.networkType}` : '当前没有网络';
            that.$common.showTip(tips, 'none');
            that.$store.dispatch('setNetwork', res);
        });
        // #endif

        //手机型号信息
        uni.getSystemInfo().then(data => {
            let [err, res] = data;
            if (res) {
                console.log(res);
                console.log('res: ' + JSON.stringify(res));
                res.isIos = res.platform == 'ios' ? true : false;
                that.$store.dispatch('setSystemInfo', res);
            }
        });
    },
    onShow: function() {
        console.log('App Show');
    },
    onHide: function() {
        console.log('App Hide');
    }
};
</script>

<style lang="scss">
/* 注意声明lang="scss"！ */
@import '@/common/css/common.scss';
@import 'uview-ui/index.scss';
 // top: calc(var(--window-top) + 44px + var(--status-bar-height));
page{
	background: #f5f5f5;
}
.flex {
    display: flex;
}
.navtop {
    color: #000;
    &-left,
    &-item {
        padding: 0 16rpx;
        .icon {
            width: 18px;
            height: 18px;
            vertical-align: middle;
        }
        text{
            height: 20px;
            line-height: 20px;
            display: inline-block;
            overflow: hidden;
            font-size: 13px;
            vertical-align: middle;
            &.txt-hide{
                 max-width: 50px;
            }
        }
    }
    &-content {
        width: 100%;
    }
    &-right {
        padding: 0 10px;
        .icon {
            width: 20px;
            height: 20px;
        }
    }
}

.swiper-wrap {
    padding: 22rpx 30rpx;
}

.navlist {
    .flex {
        justify-content: space-between;
    }
    .nav-item {
        width: 25%;
        padding: 20rpx 0;
        text-align: center;
        .icon {
            width: 60rpx;
            height: 60rpx;
        }
        .name {
            font-size: 13px;
            color: $uni-text-color;
            height: 60rpx;
            line-height: 60rpx;
        }
    }
}

.tabs {
    width: 100%;
    background: $uni-bg-color-grey;
    position: fixed;
    left: 0;
    z-index: 999;
}

.col-green {
    color: $color-green;
}
.col-yel {
    color: $color-yel;
}
.col-yel2 {
    color: $color-yel2;
}
.price {
    color: $color-red;
    text {
        font-size: 18px;
    }
}
.col-yel3 {
    color: $color-yel3;
}

.uses-add-list {
    .item {
        background: $uni-bg-color-grey;
    }
}

.popup {
    padding: 20rpx 30rpx;
    &-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        .title {
            font-size: 17px;
            font-size: bold;
        }
        .close-text {
            color: #999;
            font-size: 15px;
        }
        .confirm-text {
            color: $color-yel2;
            font-size: 15px;
        }
    }
    .btnbox {
        position: fixed;
        bottom: 20rpx;
        width: 100%;
        left: 0;
        padding: 0 40rpx 10rpx;
        z-index: 9;
    }
}



.btn-style {
    border-radius: 50px;
    background: $color-yel2;
    color: $uni-text-color-inverse;
    border-color: $color-yel2;
    &:after {
        border-color: $color-yel2;
    }
}

.btn-style2{
    border-radius: 50px;
    // f55545
    background: $color-red;
    color: $uni-text-color-inverse;
    border-color: $color-red;
    &:after {
        border-color: $color-red;
    }
}

.btn-style3{
    border-radius: 50px;
    // f55545
    background: $color-blue2;
    color: $uni-text-color-inverse;
    border-color: $color-blue2;
    box-shadow: 0px 6rpx 40rpx 0px rgba(33, 160, 255, 0.35);
    &:after {
        border-color: $color-blue2;
    }
}

.comment-link {
    border-top: 1px solid $uni-border-color;
    padding: 26rpx 0;
    text-align: center;
    color: #666;
    text {
        font-size: 13px;
        margin-right: 5px;
    }
}

.popup {
    position: relative;
    .bgimg {
        width: 100%;
        height: 240rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    .content {
        position: relative;
        z-index: 2;
    }
}

.canbig {
    position: fixed;
    top: 5%;
    left: 15%;
    width: 70%;
    z-index: 9999;
    .big {
        width: 100%;
        height: 800rpx;
    }
}

.canvas-popup {
    .canflex {
        display: flex;
        justify-content: center;
        padding: 40rpx 0 0;
        .item {
            display: inline-block;
            border-radius: 6px;
            border: 3px solid #f4f4f4;
            position: relative;
            margin: 0 5px;
            &.active {
                border-color: $color-yel2;
                .icons {
                    opacity: 1;
                }
            }
        }
        .icons {
            position: absolute;
            left: 30rpx;
            top: 0;
            opacity: 0;
            transform: translate(0, -100%);
        }
        .icon {
            width: 14px;
            height: 20px;
            display: block;
        }
        .canimg {
            width: 130rpx;
            height: 160rpx;
            border-radius: 4px;
            display: block;
        }
    }
    .btnbox {
        padding: 20rpx 30rpx;
    }
}

.seltit {
    padding: 20rpx 50rpx;
    font-size: 14px;
    font-weight: bold;
}

.fixed-btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: $uni-bg-color;
    padding: 20rpx 30rpx;
    box-shadow: 0 0 20px #eee;
    .left {
        font-size: 14px;
    }
    .right {
        width: 50%;
    }
    .flex {
        justify-content: space-between;
        align-items: center;
    }
}
.col-red {
    color: $color-red;
}
.col-blue {
    color: $color-blue;
}

.-mlr-30 {
    margin-left: -30rpx;
    margin-right: -30rpx;
}

.notdatas{
    text-align: center;
    .icon{
        
    }
}

	
.btnbox.fixed{
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99;
	width: 100%;
	padding: 20rpx 30rpx;
	background: #F8FAFD;;
}
	
	
.order-list{
	padding: 20rpx 30rpx;
	.order-item{
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 12px;
		padding: 0 30rpx;
	}
	.order-head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 0;
	}
	
	.order-foot{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		.left{
			font-size: 14px;
			text{
				color: $color-red;
				font-size: 16px;
			}
		}
		.icon{
			width: 20px;
			height: 20px;
		}
	}
	.btnbox{
		
	}
	.return-left{
		display: flex;
		align-items: center;
	}
	.desc-i{
		font-size: 12px;
		display: flex;
		align-items: center;
	}
}
.form-item-info{
	text-align: right;
	width: 100%;
}
.form-text{
	color: #2C2C2C;
	font-size: 13px;
}
page{
    /* #ifdef APP-PLUS */
    background: $uni-bg-color-grey;
    /* #endif */
}

.popup-wrap{
	text-align: center;
	.title{
		padding: 48rpx 0 26rpx;
		font-size: 16px;
		font-weight: bold;
	}
	.int{
		padding: 0 48rpx 50rpx;
		input{
			background: #F8FAFD;
			height: 42px;
			font-size: 14px;
		}
	}
	.btnbox{
		display: flex;
		width: 100%;
		border-top: 1px solid #ddd;
		.btn-item{
			width: 50%;
			height: 50px;
			line-height: 50px;
			border-right: 1px solid #ddd;
			font-size: 15px;
			&:nth-last-child(1){
				border: 0;
			}
		}
		.confirm{
			color: $color;
		}
	}
	.content{
		padding: 0 36rpx 30rpx;
	}
	.int-item{
		display: flex;
		align-items: center;
		color: $color;
		padding: 10rpx 0;
		text-align: left;
		.name{
			width: 60px;
			font-size: 16px;
		}
	}
	.input-item{
		flex: 1;
		display: flex;
		background: #F8FAFD;
		align-items: center;
		padding: 0 10px;
		border-radius: 8px;
		overflow: hidden;
		.input{
			height: 40px;
			flex: 1;
			font-size: 14px;
		}
	}
}


.u-calendar__content {
	.u-calendar__content__item{
		padding: 1px 0 !important;
	}
}

.goods-list{
		padding: 10rpx 30rpx;
		.item{
			display: flex;
		}
		.text{
			margin-bottom: 10rpx;
		}
		.info{
			flex: 1;
			padding-left: 20rpx;
			width: 440rpx;
		}
		.price{
			font-size: 14px;
			color: $color-red;
			text{
				font-size: 20px;
			}
		}
		.name{
			font-size: 16px;
			height: 60rpx;
			line-height: 60rpx;
			font-weight: bold;
		}
		.text{
			font-size: 14px;
			line-height: 1.6;
		}
		.btnbox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btns{
				width: 200rpx;
			}
		}
	}
	.-mlr-32rpx{
		margin: 0 -32rpx;
	}
	

		
		.col{
			color: $color;
		}
</style>
